<template lang="pug">
  div.preview(v-show="preview")
    div.svg-wrapper(v-html="preview" :style="{backgroundColor}")
    span.note {{ scheme.name }}
</template>

<script setup>

import { computed, ref, onMounted, watch, inject } from 'vue';
import api from '@/apis/api'
import { colorUseTag } from '@/utils/svg.util'


const props = defineProps({
  scheme: { type: Object },
})
const colors = inject('colors')
const graphics = inject('graphics')
const compositions = inject('compositions')
const mashups = inject('mashups')
const preview = ref('')

watch(() => props.scheme, scheme => {
  const { compositionId, swatches } = scheme
  const composition = compositions.value.find(c => c.id == compositionId)
  preview.value = colorComposition(swatches, composition?.thumbnail || '')
}, { deep: true, immediate: true })

function colorComposition(swatches, thumbnail) {
  if (!thumbnail) { return '' }
  for (let graphicId in swatches) {
    const colorId = swatches[graphicId];
    if (!colorId) continue
    const color = colors.value.find(c => c.id == colorId)
    thumbnail = colorUseTag(thumbnail, graphicId, color.hex)
  }
  return thumbnail
}

const backgroundColor = computed(() => {
  const colorId = props.scheme.backgroundColorId
  const color = colors.value.find(c => c.id == colorId)
  return color?.hex
})

</script>

<style scoped>
.note {
  font-size: 0.7rem;
}
</style>
